.login {
    width: 100%;
    height: 100%;
    color: $common-text-color!important;
    background-color: $main-bg-color!important;
    .close {
        width: 100%;
        justify-content: flex-end;
        padding-right: 20px;
        height: 50px;
        .closeIcon {
            fill: $icon-color !important;
        }
    }
    .title {
        margin-top: 20px;
        font-size: 28px;
    }

    .loginContent {
        @apply relative flex justify-center items-center w-full;
        height: 300px;
        margin-top: 20px;
        &:hover {
            .qrCode {
                transform: translateX(80px);
                width: 40%;
            }
            .tipImg {
                opacity: 1;
                transform: translateX(-80px);
            }
        }

        .qrCode {
            position: absolute;
            width: 50%;
            text-align: center;
            transition: all 0.3s linear;
            img {
                width: 100%;
            }
        }
        .tipImg {
            position: absolute;
            opacity: 0;
            transition: all 0.3s linear;
            width: 40%;
        }
    }
    .more {
        margin-top: 20px;
        color: $sub-text-color;
    }
}